<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - 企业服务系统</title>
    <style>
        :root {
            --primary-color: #ff9a52;
            --hover-color: #ffb27a;
            --error-color: #f5222d;
            --success-color: #52c41a;
            --text-color: #333;
            --light-text: #666;
            --border-color: #d9d9d9;
            --bg-color: #f8f8f8;
            --banner-bg: linear-gradient(135deg, #ff9a00 0%, #ffbb33 100%);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: var(--bg-color);
            min-height: 100vh;
            display: flex;
            overflow: hidden;
        }
        
        .side-section {
            width: 25%;
            background: var(--banner-bg);
        }
        
        .register-section {
            width: 50%;
            background: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 40px 8%;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        
        .register-header {
            margin-bottom: 30px;
        }
        
        .register-header h2 {
            font-size: 24px;
            color: var(--text-color);
            margin-bottom: 10px;
        }
        
        .register-header p {
            color: var(--light-text);
            font-size: 14px;
        }
        
        .register-form .form-group {
            margin-bottom: 20px;
        }
        
        .register-form label {
            display: block;
            margin-bottom: 6px;
            font-size: 14px;
            color: var(--light-text);
        }
        
        .register-form input, .register-form select {
            width: 100%;
            height: 42px;
            padding: 0 12px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .register-form input:focus, .register-form select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(255,123,37,0.2);
            outline: none;
        }
        
        .register-form input[value]:not([value=""]),
        .register-form input:not(:placeholder-shown) {
            background-color: #fff8e6;
            border-color: #ffd591;
        }
        
        .captcha-group {
            display: flex;
            gap: 10px;
        }
        
        .captcha-group input {
            flex: 1;
        }
        
        .captcha-img {
            width: 120px;
            height: 42px;
            background: #f0f0f0;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            user-select: none;
            font-family: monospace;
            font-size: 18px;
            letter-spacing: 2px;
        }
        
        .agreement {
            display: flex;
            align-items: center;
            margin: 25px 0;
            font-size: 13px;
        }
        
        .agreement input {
            width: auto;
            height: auto;
            margin-right: 8px;
        }
        
        .agreement a {
            color: var(--primary-color);
            text-decoration: none;
        }
        
        .submit-btn {
            width: 100%;
            height: 42px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 15px;
            font-weight: 500;
            cursor: button;
            transition: all 0.3s;
            position: relative;
        }
        
        .submit-btn:hover {
            background: var(--hover-color);
        }
        
        .submit-btn:disabled {
            background: #d9d9d9;
            cursor: not-allowed;
        }
        
        .submit-btn .loading-spinner {
            display: none;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
        
        .submit-btn.loading .loading-spinner {
            display: block;
        }
        
        .submit-btn.loading span {
            visibility: hidden;
        }
        
        .error-message {
            color: var(--error-color);
            font-size: 12px;
            margin-top: 4px;
            display: none;
        }
        
        /* 邮箱验证码相关样式 */
        .email-verify-group {
            display: flex;
            gap: 10px;
        }
        
        .email-verify-group input {
            flex: 1;
        }
        
        .send-verify-btn {
            width: 120px;
            height: 42px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .send-verify-btn:hover {
            background: var(--hover-color);
        }
        
        .send-verify-btn:disabled {
            background: #d9d9d9;
            cursor: not-allowed;
        }
        
        .countdown {
            display: none;
            width: 120px;
            height: 42px;
            background: #f0f0f0;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: var(--light-text);
        }
        
        @media (max-width: 1200px) {
            .side-section {
                display: none;
            }
            
            .register-section {
                width: 100%;
                padding: 40px 15%;
            }
        }
        
        @media (max-width: 768px) {
            .register-section {
                padding: 30px 10%;
            }
        }
        
        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background: white;
            width: 80%;
            max-width: 500px;
            padding: 30px;
            border-radius: 8px;
            text-align: center;
        }
        
        .modal h2 {
            margin-bottom: 20px;
            color: var(--text-color);
        }
        
        .modal p {
            margin-bottom: 30px;
            color: var(--light-text);
        }
        
        .modal-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        
        .modal-btn {
            padding: 10px 25px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .modal-btn.primary {
            background: var(--primary-color);
            color: white;
            border: none;
        }
        
        .modal-btn.primary:hover {
            background: var(--hover-color);
        }
        
        /* 营业执照上传样式 */
        .license-upload {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
        
        .license-preview {
            width: 100%;
            height: 180px;
            margin-bottom: 20px;
            border: 1px dashed var(--border-color);
            border-radius: 4px;
            overflow: hidden;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f9f9f9;
        }
        
        .license-preview img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .license-upload-btn {
            position: relative;
            display: inline-block;
            margin-bottom: 20px;
        }
        
        .license-upload-btn input[type="file"] {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        
        .license-hint {
            font-size: 12px;
            color: var(--light-text);
            margin-top: 10px;
        }
        
        /* 进度条样式 */
        .progress-bar {
            width: 100%;
            height: 6px;
            background: #f0f0f0;
            border-radius: 3px;
            margin: 20px 0;
            overflow: hidden;
        }
        
        .progress {
            height: 100%;
            background: var(--primary-color);
            width: 0%;
            transition: width 0.3s;
        }
        
        /* 成功提示 */
        .success-icon {
            font-size: 48px;
            color: var(--success-color);
            margin-bottom: 20px;
        }
        
        /* 预览区域默认内容样式 */
        .preview-default-content {
            text-align: center;
            color: var(--light-text);
        }
        
        .preview-default-content svg {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <!-- 左侧背景区 -->
    <div class="side-section"></div>
    
    <!-- 中间注册表单区 -->
    <div class="register-section">
        <div class="register-header">
            <h2>创建企业账号</h2>
            <p>请填写以下信息完成注册</p>
        </div>
        
        <form class="register-form" id="registerForm">
            <div class="form-group">
                <label for="email">企业邮箱</label>
                <input type="email" id="email" name="email" placeholder="请输入企业邮箱" required>
                <div class="error-message" id="emailError"></div>
            </div>
            
            <div class="form-group">
                <label for="verifyCode">邮箱验证码</label>
                <div class="email-verify-group">
                    <input type="text" id="verifyCode" name="verifyCode" placeholder="请输入验证码" required>
                    <button type="button" class="send-verify-btn" id="sendVerifyBtn">获取验证码</button>
                    <div class="countdown" id="countdown">60秒后重试</div>
                </div>
                <div class="error-message" id="verifyCodeError"></div>
            </div>
            
            <div class="form-group">
                <label for="name">用户名</label>
                <input type="text" id="name" name="name" placeholder="请输入用户名" required>
                <div class="error-message" id="nameError"></div>
            </div>
            
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" placeholder="请输入密码（至少8位）" required minlength="8">
                <div class="error-message" id="passwordError"></div>
            </div>
            
            <div class="form-group">
                <label for="phone">手机号码</label>
                <input type="tel" id="phone" name="phone" placeholder="请输入手机号码">
                <div class="error-message" id="phoneError"></div>
            </div>
            
            <div class="form-group">
                <label for="age">年龄</label>
                <input type="number" id="age" name="age" placeholder="请输入年龄" required min="1">
                <div class="error-message" id="ageError"></div>
            </div>
            
            <div class="form-group">
                <label for="sex">性别</label>
                <select id="sex" name="sex" required>
                    <option value="201">男</option>
                    <option value="202">女</option>
                    <option value="203">其他</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="captcha">图形验证码</label>
                <div class="captcha-group">
                    <input type="text" id="captcha" name="captcha" placeholder="请输入验证码" required>
                    <div class="captcha-img" id="captchaImg">A7B9</div>
                </div>
                <div class="error-message" id="captchaError"></div>
            </div>
            
            <div class="agreement">
                <input type="checkbox" id="agree" name="agree" required>
                <label for="agree">我已阅读并同意 <a href="javascript:void(0)" id="agreementLink">《用户协议》</a></label>
            </div>
            
            <button type="submit" class="submit-btn" id="submitBtn">
                <span>立即注册</span>
                <div class="loading-spinner"></div>
            </button>
        </form>
    </div>

    <!-- 右侧背景区 -->
    <div class="side-section"></div>

    <!-- 用户协议弹窗 -->
    <div id="agreementModal" class="modal">
        <div class="modal-content">
            <h2>用户协议</h2>
            <div style="line-height:1.8; font-size:15px; max-height:50vh; overflow-y:auto;">
                <h3 style="margin:20px 0 10px 0;">一、服务条款</h3>
                <p>1. 本协议是您与企业服务系统之间关于使用服务的法律协议。</p>
                <p>2. 我们保留随时修改本协议条款的权利，修改后的协议一经公布即有效代替原有协议。</p>
                
                <h3 style="margin:20px 0 10px 0;">二、账号注册</h3>
                <p>1. 用户注册需提供真实、准确、完整的注册信息。</p>
                <p>2. 企业邮箱将作为账号登录凭证，请确保邮箱安全。</p>
                
                <h3 style="margin:20px 0 10px 0;">三、营业执照上传</h3>
                <p>1. 企业注册完成后需上传营业执照进行验证。</p>
                <p>2. 我们承诺对您的营业执照信息严格保密。</p>
                
                <h3 style="margin:20px 0 10px 0;">四、隐私政策</h3>
                <p>1. 我们承诺保护用户隐私，不会向第三方披露用户信息。</p>
                <p>2. 为提供服务所需，我们可能会收集必要的用户数据。</p>
            </div>
            <div class="modal-buttons" style="margin-top:30px;">
                <button id="closeAgreement" class="modal-btn primary">我已阅读并同意</button>
            </div>
        </div>
    </div>

    <!-- 营业执照上传弹窗 -->
    <div id="licenseModal" class="modal">
        <div class="modal-content">
            <h2>请上传营业执照</h2>
            <p>您的企业账号已创建成功，请上传营业执照完成验证</p>
            
            <div class="license-upload">
                <div class="license-preview" id="licensePreview">
                    <div class="preview-default-content">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                            <polyline points="14 2 14 8 20 8"></polyline>
                        </svg>
                        <p>营业执照预览</p>
                    </div>
                </div>
                
                <div class="license-upload-btn">
                    <button class="modal-btn primary">选择营业执照文件</button>
                    <input type="file" id="licenseInput" accept="image/*,.pdf">
                </div>
                
                <p class="license-hint">支持 JPG、PNG、PDF 格式，大小不超过 5MB</p>
                
                <div class="progress-bar" id="progressBar" style="display: none;">
                    <div class="progress" id="progress"></div>
                </div>
                
                <div class="modal-buttons">
                    <button id="confirmLicenseBtn" class="modal-btn primary" disabled>确认上传</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 上传成功弹窗 -->
    <div id="successModal" class="modal">
        <div class="modal-content">
            <div class="success-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                </svg>
            </div>
            <h2>营业执照上传成功</h2>
            <p>您的营业执照已成功上传，请等待审核结果</p>
            <p>审核结果将在1-3个工作日内发送至您的邮箱，请注意查收</p>
            <div class="modal-buttons">
                <button id="closeSuccessModal" class="modal-btn primary">确定</button>
            </div>
        </div>
    </div>

    <script>
        // 用户协议弹窗控制
        document.getElementById('agreementLink').addEventListener('click', function() {
            document.getElementById('agreementModal').style.display = 'flex';
        });
        
        document.getElementById('closeAgreement').addEventListener('click', function() {
            document.getElementById('agreementModal').style.display = 'none';
        });
        
        // 图形验证码刷新
        document.getElementById('captchaImg').addEventListener('click', function() {
            const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789';
            let result = '';
            for (let i = 0; i < 4; i++) {
                result += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            this.textContent = result;
        });
        
        // 发送邮箱验证码
        document.getElementById('sendVerifyBtn').addEventListener('click', function() {
            const emailInput = document.getElementById('email');
            const email = emailInput.value.trim();
            const sendBtn = document.getElementById('sendVerifyBtn');
            const countdown = document.getElementById('countdown');
            
            // 验证邮箱格式
            if (!email) {
                showError('emailError', '请输入邮箱地址');
                return;
            }
            
            if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email)) {
                showError('emailError', '邮箱格式不正确');
                return;
            }
            
            // 清除错误提示
            document.getElementById('emailError').style.display = 'none';
            
            // 禁用发送按钮
            sendBtn.disabled = true;
            
            // 准备请求数据
            const myHeaders = new Headers();
            myHeaders.append("Content-Type", "application/json");
            
            const raw = JSON.stringify({
                "mail": email
            });
            
            const requestOptions = {
                method: 'POST',
                headers: myHeaders,
                body: raw,
                redirect: 'follow'
            };
            
            // 发送验证码请求
            fetch("/api/v1/public/send_verifyCode_by_email", requestOptions)
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(err => {
                            throw new Error(err.message || '发送验证码失败');
                        });
                    }
                    return response.json();
                })
                .then(result => {
                    console.log('验证码发送成功:', result);
                    alert('验证码已发送至您的邮箱，请查收');
                    
                    // 开始倒计时
                    startCountdown(60);
                })
                .catch(error => {
                    console.error('发送验证码错误:', error);
                    showError('emailError', error.message || '发送验证码失败');
                    sendBtn.disabled = false;
                });
        });
        
        // 倒计时函数
        function startCountdown(seconds) {
            const sendBtn = document.getElementById('sendVerifyBtn');
            const countdown = document.getElementById('countdown');
            
            sendBtn.style.display = 'none';
            countdown.style.display = 'flex';
            
            let remaining = seconds;
            countdown.textContent = `${remaining}秒后重试`;
            
            const timer = setInterval(() => {
                remaining--;
                countdown.textContent = `${remaining}秒后重试`;
                
                if (remaining <= 0) {
                    clearInterval(timer);
                    sendBtn.style.display = 'block';
                    countdown.style.display = 'none';
                    sendBtn.disabled = false;
                }
            }, 1000);
        }
        
        // 表单提交
        document.getElementById('registerForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 清除所有错误提示
            document.querySelectorAll('.error-message').forEach(el => {
                el.style.display = 'none';
            });

            // 验证图形验证码
            const captcha = document.getElementById('captcha').value;
            const captchaText = document.getElementById('captchaImg').textContent;
            if (captcha.toUpperCase() !== captchaText) {
                document.getElementById('captchaError').textContent = '验证码不正确';
                document.getElementById('captchaError').style.display = 'block';
                return;
            }
            
            // 验证邮箱验证码
            const verifyCode = document.getElementById('verifyCode').value.trim();
            if (!verifyCode) {
                showError('verifyCodeError', '请输入邮箱验证码');
                return;
            }
            
            // 验证用户协议
            if (!document.getElementById('agree').checked) {
                alert('请先阅读并同意用户协议');
                return;
            }
            
            // 验证年龄
            const ageInput = document.getElementById('age').value;
            const age = parseInt(ageInput);
            if (isNaN(age) || age <= 0 || !Number.isInteger(parseFloat(ageInput))) {
                document.getElementById('ageError').textContent = '请输入有效的正整数年龄';
                document.getElementById('ageError').style.display = 'block';
                return;
            }

            // 准备请求数据
            const formData = {
                email: document.getElementById('email').value.trim(),
                verifyCode: verifyCode,
                name: document.getElementById('name').value.trim(),
                password: document.getElementById('password').value,
                phone: document.getElementById('phone').value.trim(),
                sex: parseInt(document.getElementById('sex').value)
            };

            // 验证必填字段
            if (!formData.email) {
                showError('emailError', '请输入邮箱地址');
                return;
            }
            if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(formData.email)) {
                showError('emailError', '邮箱格式不正确');
                return;
            }
            if (!formData.name) {
                showError('nameError', '请输入用户名');
                return;
            }
            if (formData.name.length < 2 || formData.name.length > 32) {
                showError('nameError', '用户名长度需在2-32个字符之间');
                return;
            }
            if (formData.password.length < 8) {
                showError('passwordError', '密码至少需要8位');
                return;
            }

            // 禁用提交按钮防止重复提交
            const submitBtn = document.getElementById('submitBtn');
            submitBtn.disabled = true;
            submitBtn.classList.add('loading');
            
            // 实际API调用
            const myHeaders = new Headers();
            myHeaders.append("Content-Type", "application/json");

            const requestOptions = {
                method: 'POST',
                headers: myHeaders,
                body: JSON.stringify(formData),
                redirect: 'follow'
            };

            fetch("/v1/user/register", requestOptions)
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(err => {
                            throw new Error(err.message || '注册失败');
                        });
                    }
                    return response.json();
                })
                .then(result => {
                    console.log('注册成功:', result);
                    // 显示营业执照上传弹窗
                    document.getElementById('licenseModal').style.display = 'flex';
                })
                .catch(error => {
                    console.error('注册错误:', error);
                    alert(error.message || '注册过程中发生错误');
                })
                .finally(() => {
                    submitBtn.disabled = false;
                    submitBtn.classList.remove('loading');
                });
        });

        // 显示错误信息
        function showError(elementId, message) {
            const element = document.getElementById(elementId);
            element.textContent = message;
            element.style.display = 'block';
        }
        
        // 营业执照上传处理
        document.getElementById('licenseInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;
            
            // 检查文件类型和大小
            const validTypes = ['image/jpeg', 'image/png', 'application/pdf'];
            if (!validTypes.includes(file.type)) {
                alert('请上传JPG、PNG或PDF格式的文件');
                return;
            }
            
            if (file.size > 5 * 1024 * 1024) {
                alert('文件大小不能超过5MB');
                return;
            }
            
            // 预览文件
            const preview = document.getElementById('licensePreview');
            if (file.type.includes('image')) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.innerHTML = `<img src="${e.target.result}" alt="营业执照预览">`;
                };
                reader.readAsDataURL(file);
            } else {
                preview.innerHTML = `
                    <div class="preview-default-content">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                            <polyline points="14 2 14 8 20 8"></polyline>
                        </svg>
                        <p>${file.name}</p>
                    </div>
                `;
            }
            
            // 启用确认按钮
            document.getElementById('confirmLicenseBtn').disabled = false;
        });
        
        // 确认上传营业执照
        document.getElementById('confirmLicenseBtn').addEventListener('click', function() {
            const btn = this;
            const progressBar = document.getElementById('progressBar');
            const progress = document.getElementById('progress');
            const fileInput = document.getElementById('licenseInput');
            
            if (!fileInput.files || fileInput.files.length === 0) {
                alert('请先选择营业执照文件');
                return;
            }
            
            const file = fileInput.files[0];
            btn.disabled = true;
            progressBar.style.display = 'block';
            
            // 创建FormData对象
            const formData = new FormData();
            formData.append('file', file);
            
            // 实际API调用
            fetch("/v1/image/upload", {
                method: 'POST',
                body: formData,
                redirect: 'follow'
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.message || '上传失败');
                    });
                }
                return response.json();
            })
            .then(result => {
                console.log('上传成功:', result);
                progress.style.width = '100%';
                
                // 关闭当前弹窗
                document.getElementById('licenseModal').style.display = 'none';
                
                // 显示上传成功弹窗
                document.getElementById('successModal').style.display = 'flex';
            })
            .catch(error => {
                console.error('上传错误:', error);
                alert(error.message || '上传过程中发生错误');
                
                // 重置上传状态
                progress.style.width = '0%';
                progressBar.style.display = 'none';
                btn.disabled = false;
            });
            
            // 模拟进度条（实际项目中可根据xhr.upload.onprogress实现真实进度）
            let progressValue = 0;
            const interval = setInterval(() => {
                progressValue += 10;
                progress.style.width = `${progressValue}%`;
                
                if (progressValue >= 90) {
                    clearInterval(interval);
                }
            }, 300);
        });
        
        // 关闭成功弹窗
        document.getElementById('closeSuccessModal').addEventListener('click', function() {
            document.getElementById('successModal').style.display = 'none';
            // 这里可以跳转到首页或其他页面
            // window.location.href = '/';
        });
    </script>
</body>
</html>